<template>
    <div class="wrapper">
        <!---头部标题--->
        <header>
            <b style="font-family: 幼圆;color:#fff;font-size: 7vw;display: flex;align-items: center;">饿了么</b>
            <div class="icon-location-box" id="header">
                <div class="icon-location"> </div>
            </div>
            <div class="title"  style="font-size: 4vw;">{{ user==null?配送地址:deliveryAddressArr[0].address }}<i class="fa fa-caret-down"></i></div>
        </header>


        <!---搜索栏--->
        <div class="search">
            <div class="search-fixed-top" ref="fixedbox">
                <div class="search-box">
                    <i class="fa fa-search" style="margin-right: 5vw;"></i>
                    搜索饿了么商家、商品名称
                </div>
            </div>
        </div>


        <!---点餐分类--->
        <ul class="foodtype">
            <li @click="toBusinessList(1)">
                <img src="../assets/dcfl01.png">
                <p>美食</p>
            </li>
            <li @click="toBusinessList(2)">
                <img src="../assets/dcfl02.png">
                <p>早餐</p>
            </li>
            <li @click="toBusinessList(3)">
                <img src="../assets/dcfl03.png">
                <p>跑腿代购</p>
            </li>
            <li @click="toBusinessList(4)">
                <img src="../assets/dcfl04.png">
                <p>汉堡披萨</p>
            </li>
            <li @click="toBusinessList(5)">
                <img src="../assets/dcfl05.png">
                <p>甜品饮品</p>
            </li>
            <li @click="toBusinessList(6)">
                <img src="../assets/dcfl06.png">
                <p>速食简餐</p>
            </li>
            <li @click="toBusinessList(7)">
                <img src="../assets/dcfl07.png">
                <p>地方小吃</p>
            </li>
            <li @click="toBusinessList(8)">
                <img src="../assets/dcfl08.png">
                <p>米粉面馆</p>
            </li>
            <li @click="toBusinessList(9)">
                <img src="../assets/dcfl09.png">
                <p>包子粥铺</p>
            </li>
            <li @click="toBusinessList(10)">
                <img src="../assets/dcfl10.png">
                <p>炸鸡炸串</p>
            </li>
        </ul>
        <!-----横幅广告----->
        <div class="banner">
            <h3>拼好饭</h3>
            <p>只要十块吃好饭</p>
            <a>立即抢购 &gt;</a>
        </div>
        <!----会员--->
        <div class="vip">
            <div class="vip-left">
                <img src="">
                <h3 style="font-size: 4.5vw;">会员中心·</h3>
                <p style="font-size: 3.5vw;">开通会员，享受更多优惠</p>
            </div>
            <div class="vip-right">
                <p style="font-size: 4.5vw;">立即开通 &gt;</p>
            </div>
        </div>
        <!---推荐商家-->
        <div class="recommend">
            <p style="margin-right: 3vw;">——</p>
            <h3 style="font-size: 4vw;">推荐商家</h3>
            <p style="margin-left: 3vw;">——</p>
        </div>
        <!---商家推荐方式--->
        <ul class="recom_type">
            <li @click="listById">综合排序<i class="fa fa-caret-down"></i></li>
            <li> 距离最近</li>
            <li @click="listBySales"> 销量最高</li>
            <li> 筛选<i class="fa fa-filter"></i></li>
        </ul>
        <!-------推荐商家------>
        <ul class="bussiness" v-if="update">
            <li class="tansto" v-for="item in businessArr" @click="toBusinessInfo(item.businessId)">
                <img :src="item.businessImg">
                <div class="business-img-quantity" v-show="item.quantity > 0">{{ item.quantity }}</div>
                <div class="bussiness-info">
                    <div class="bussiness-info-h">
                        <h3 style="font-size: 4.5vw;">{{ item.businessName }}</h3>
                        <div class="bussiness-info-like">&#8226;</div>
                    </div>
                    <div class="bussiness-info-star">
                        <div class="bussiness-info-star-left">
                            <p style="color:tomato; font-size: 4vw; font-weight: bold;">{{ item.avg_star.toFixed(1) }}分</p> <p> 月售{{ item.monthlySales }}单</p>           <!--星级-->
                        </div>
                        <div class="bussiness-info-star-right">
                            蜂鸟专送
                        </div>
                    </div>
                    <div class="bussiness-info-delivery">
                        <p>起送￥{{ item.starPrice }} | 配送￥{{ item.deliveryPrice }}</p>
                        <p>3.2km | 30分钟</p>
                    </div>
                    <div class="bussiness-info-explain">
                        <p>{{ item.businessExplain }}</p>
                    </div>
                    <div class="bussiness-info-promotion">
                        <div class="bussiness-info-promotion-left">
                            <div class="bussiness-info-promotion-left-incon">新</div>
                            <p>饿了么新用户首单立减0.1元</p>
                        </div>
                        <div class="bussiness-info-promotion-right">
                            <p>2个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                    <div class="bussiness-info-promotion">
                        <div class="bussiness-info-promotion-left">
                            <div class="bussiness-info-promotion-left-incon-down">特</div>
                            <p>特价商品5元起</p>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div style="height: 20vw; "></div> <!--留空-->
        <p style="text-align: center">我也是有底线的哦</p> <!--彩蛋，大雾-->
        <Footer></Footer> <!--主动调用要保留。要不然怎么知道要放个进去-->
    </div>

</template>

<script>
import Footer from '../components/Footer.vue';

export default {
    name: 'Index',
    data() {
        return {
            orderTypeId: this.$route.query.orderTypeId,
            businessArr: [],
            user: {},
            update: true,
            deliveryAddressArr:[]
        }
    },
    created() {
        this.user = this.$getSessionStorage('user');
        this.$axios.post('BusinessController/listAllBusiness', this.$qs.stringify({
            orderTypeId: 1
        })).then(response => {
            this.businessArr = response.data;
            if (this.user != null) {
                this.listCart();
            }
        }).catch(error => {
            console.error(error);
        });
        this.$axios.post('DeliveryAddressController/listDeliveryAddressByUserId', this.$qs.stringify({
            userId: this.user.userId
        })).then(response => {
            this.deliveryAddressArr = response.data;
        }).catch(error => {
            console.error(error);
        });
    },
    mounted() {         //dom
        //搜索栏随滚动部分固定效果
        document.onscroll = () => {    //document.onscroll表示滚动条滚动时执行
            let s1 = document.documentElement.scrollTop;    //获取滚动条滚动的距离
            let s2 = document.body.scrollTop;
            let scroll = s1 == 0 ? s2 : s1;    //获取滚动条滚动的距离
            console.log(scroll);
            let width = document.documentElement.clientWidth;    //获取屏幕宽度
            console.log(width);
            // let search = document.getElementById('fixedbox');    //获取搜索栏
            let search = this.$refs.fixedbox;
            if (scroll > width * 0.12) {
                search.style.position = "fixed";    //固定搜索栏
                search.style.top = "0";
                search.style.left = "0";
            }
            else {
                search.style.position = "static";    //搜索栏不固定
            }
        }
    },
    destroyed() {               //dom控件结束后可能会继承给其他页面导致报错，结束当前页面后需要删除
        document.onscroll = null;
    },
    components: {                //共同组件，这里是底部四个按钮
        Footer
    },
    methods: {
        listCart() {
            this.$axios.post('CartController/listCart', this.$qs.stringify({
                userId: this.user.userId
            })).then(response => {
                let cartArr = response.data;
                //遍历所有食品列表
                for (let businessItem of this.businessArr) {
                    businessItem.quantity = 0;
                    for (let cartItem of cartArr) {
                        if (cartItem.businessId == businessItem.businessId) {
                            businessItem.quantity += cartItem.quantity;
                        }
                    }
                }
                this.businessArr.sort();
            }).catch(error => {
                console.error(error);
            });
        },
        listBySales() {
            this.update = false
            this.$axios.post('BusinessController/listBusinessesBySales', this.$qs.stringify({
                orderTypeId: 1
            })).then(response => {
                this.businessArr = response.data;
                if (this.user != null) {
                    this.listCart();
                }

            }).catch(error => {
                console.error(error);
            });
            this.update = true;
        },
        listById() {
            this.user = this.$getSessionStorage('user');
            this.$axios.post('BusinessController/listAllBusiness', this.$qs.stringify({
                orderTypeId: 1
            })).then(response => {
                this.businessArr = response.data;
                if (this.user != null) {
                    this.listCart();
                }
            }).catch(error => {
                console.error(error);
            });
        },
        //对应@click="toBusinessList()"    获取ID，返回对应list
        toBusinessList(orderTypeId) {
            this.$router.push({ path: '/businessList', query: { orderTypeId: orderTypeId } });
        },
        toBusinessInfo(businessId) {
            this.$router.push({ path: '/businessInfo', query: { businessId: businessId } });
        }
    }
}

</script>

<style scoped>
/****总容器***/
.wrapper {
    width: 100%;
    height: auto;
    /*不改大search框悬浮不了*/
    overflow-x: hidden;
    /* 隐藏水平滚动条 */
}

/****头部***/
.wrapper header {
    width: 100%;
    height: 12vw;
    /*头部高度为12%*/
    background-color: #0097ff;
    display: flex;
    align-items: center;
}

/****头部logo***/
.wrapper header .icon-location-box {
    width: 3.5vw;
    height: 3.5vw;
    margin: 3vw 3vw 3vw 3vw;
    /*上右下左*/
}

/****search总容器***/
.wrapper .search {
    width: 100%;
    height: 13vw;
    z-index: 9999999;
}

/****search背景***/
.wrapper .search .search-fixed-top {
    width: 100%;
    height: 13vw;
    background-color: #0097ff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
}

/****search输入框***/
.wrapper .search .search-fixed-top .search-box {
    width: 90%;
    height: 9vw;
    background-color: aliceblue;
    align-items: center;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    font-size: 4vw;
    color: #aeaeae;
    font-family: "宋体";
    user-select: none;
    z-index: 9999999;
    /*此样式让placeholder无法选中*/
}

.wrapper .foodtype {
    width: 100%;
    height: 48vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
}

.wrapper .foodtype li {
    width: 18vw;
    height: 20vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.wrapper .foodtype li img {
    width: 12vw;
    height: 12vw;
}

.wrapper .foodtype li p {
    color: gray;
    font-size: 3.2vw;
}

/************横幅广告*/
.wrapper .banner {
    width: 95vw;
    margin: 0 auto;
    height: 29vw;
    background-color: rgb(250, 246, 246);

    box-sizing: border-box;
    padding: 2vw 6vw;
}

.wrapper .banner h3 {
    font-size: 4.2vw;
    margin-bottom: 3.2vw;
}

.wrapper .banner p {
    font-size: 3.4vw;
    color: gray;
    margin-bottom: 4vw;
}

.wrapper .banner a {
    font-size: 3vw;
    color: #c79060;
    font-weight: 700;
}

/*************VIP**************/
.wrapper .vip {
    width: 95vw;
    margin: 0 auto;
    height: 11.5vw;
    background-color: #feedc1;
    margin-top: 1.3vw;
    border-radius: 2px;
    color: #644f1b;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrapper .vip .vip-left {
    display: flex;
    align-items: center;
    margin-left: 4vw;
    user-select: none;
}

/*********推荐商家*********/
.wrapper .recommend {
    width: 100vw;
    margin: 0 auto;
    height: 14vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*******商家推荐方式******/
.wrapper .recom_type {
    width: 100vw;
    height: 6vw;
    margin-bottom: 5vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.wrapper .recom_type li {
    font-size: 3.5vw;
    color: #555;
}

/**********推荐商家************/
.wrapper .bussiness {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.wrapper .bussiness li {
    width: 100%;
    box-sizing: border-box;
    padding: 2.5vw;
    display: flex;
    user-select: none;
    border-bottom: solid 1px #f0f0f0;
}

.wrapper .bussiness li img {
    width: 18vw;
    height: 18vw;
}

.wrapper .bussiness li .business-img-quantity {
    width: 5vw;
    height: 5vw;
    background-color: rgb(230, 10, 10);
    color: #fff;
    font-size: 3.6vw;
    border-radius: 2.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 17vw;
    z-index: 0;
}

.wrapper .bussiness li .bussiness-info {
    width: 100%;
    box-sizing: border-box;
    margin-left: 3vw;
}

.wrapper .bussiness li .bussiness-info .bussiness-info-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vw;
}

.wrapper .bussiness li .bussiness-info .bussiness-info-h h3 {
    font-size: 4vw;
    color: #333;
}

.wrapper .bussiness li .bussiness-info .bussiness-info-h .bussiness-info-like {
    width: 1.6vw;
    height: 3.4vw;
    background-color: #666;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 4vw;
}

.wrapper .bussiness li .bussiness-info .bussiness-info-star {
    color: rgb(247, 225, 127);
    justify-content: space-between;
    display: flex;
    align-items: center;
    margin-bottom: 2vw;
}

.wrapper .bussiness li .bussiness-info .bussiness-info-star .bussiness-info-star-left {
    justify-content: space-between;
    display: flex;
    align-items: center;

}

.wrapper .bussiness li .bussiness-info .bussiness-info-star .bussiness-info-star-left p {
    color: #555;
    margin-left: 2vw;
}

.wrapper .bussiness li .bussiness-info .bussiness-info-star .bussiness-info-star-right {
    background-color: #0097ff;
    color: #fff;
    font-size: 2.4vw;
    border-radius: 2px;
    padding: 0 0.6vw;
}

.wrapper .bussiness li .bussiness-info .bussiness-info-delivery {
    justify-content: space-between;
    display: flex;
    align-items: center;
    color: #555;
}

.wrapper .bussiness li .bussiness-info .bussiness-info-explain {
    display: flex;
    align-items: center;
    margin-bottom: 2vw;
    margin-top: 2vw;
}

.wrapper .bussiness li .bussiness-info .bussiness-info-explain p {
    border: solid 1px #ddd;
    border-radius: 1vw;
    font-size: 2.8vw;
    padding: 0 1vw;
    color: #555;
}

.wrapper .bussiness li .bussiness-info .bussiness-info-promotion {
    display: flex;
    align-items: center;
    margin-top: 2vw;
    justify-content: space-between;
}

.wrapper .bussiness li .bussiness-info .bussiness-info-promotion .bussiness-info-promotion-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wrapper .bussiness li .bussiness-info .bussiness-info-promotion .bussiness-info-promotion-left .bussiness-info-promotion-left-incon {
    background-color: #0097ff;
    color: #fff;
    padding: 0 0.6vw;
    font-size: 3vw;
}

.wrapper .bussiness li .bussiness-info .bussiness-info-promotion .bussiness-info-promotion-left p {
    font-size: 3vw;
    margin-left: 1vw;
}

.wrapper .bussiness li .bussiness-info .bussiness-info-promotion .bussiness-info-promotion-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #aeaeae;
}

.wrapper .bussiness li .bussiness-info .bussiness-info-promotion .bussiness-info-promotion-left .bussiness-info-promotion-left-incon-down {
    background-color: #ff0000;
    color: #fff;
    font-size: 3vw;
    padding: 0 0.6vw;
}
</style>